<template>
  <div class="wrapper">
    <commonHeader></commonHeader>
    <commonAside></commonAside>
    <section id="content">
      <div class="inner-wrapper">
        <nav id="page-nav">
          <ul class="clear-fix">
            <router-link tag="li" to="/sub/sub_show" @click.native="getSubsystem(2001)">
              <a><i class="icon-show"></i>SHOW</a>
            </router-link>
            <router-link tag="li" to="/sub/sub_set" @click.native="getSubsystem(2002)">
              <a><i class="icon-set"  ></i>SET</a>
            </router-link>
            <!-- <router-link tag="li" to="/sub/sub_enclosure" @click.native="getSubsystem(2003)">
              <a><i class="icon-enclosure" ></i>ENCLOSURES</a>
            </router-link> -->
            <!-- <router-link tag="li" to="/sub/sub_ui" @click.native="getSubsystem(2004)">
              <a><i class="icon-ui" ></i>UI</a>
            </router-link>
            <router-link tag="li" to="/sub/sub_users" @click.native="getSubsystem(2005)">
              <a><i class="icon-users"></i>USERS</a>
            </router-link> -->
            <router-link tag="li" to="/sub/sub_restart" @click.native="getSubsystem(2006)">
              <a><i class="icon-restart" ></i>RESTART</a>
            </router-link>
            <router-link tag="li" to="/sub/sub_shutdown" @click.native="getSubsystem(2007)">
              <a><i class="icon-shutdown" ></i>SHUTDOWN</a>
            </router-link>
            <!-- <router-link tag="li" to="/sub/sub_wizard" @click.native="getSubsystem(2008)">
              <a><i class="icon-wizard" ></i>WIZARD</a>
            </router-link> -->
          </ul>
        </nav>
        <div class="main-content">
          <router-view></router-view>
        </div>
      </div>
    </section>
  </div>

</template>
<script>
  import commonHeader from './../../components/header/header.vue'
  import commonAside from './../../components/aside/aside.vue'
  import store from '../../store'
  export default {
    name: 'sub',
    components: {
      commonHeader,
      commonAside
    },
    data () {
      return {
        controlForm: {
          opid: '',
          token: ''
        },
        formData: ''
      }
    },
    beforeCreate: function () {

    },
    methods: {
      getSubsystem: function (openid) {
        // Create a socket instance
        const that = this
        this.controlForm.opid = openid
        var data = this.controlForm
        var socket = store.state.socket
//        const socket = new WebSocket('ws://localhost:9000')
        // Open the socket
//        socket.onopen = function (event) {
            // Send an initial message
        that.controlForm.token = store.state.items
        console.log(JSON.stringify(data))
        socket.send(JSON.stringify(data))
        // Listen for messages
        socket.onmessage = function (event) {
          console.log('Client received a message', event)
          if (event && JSON.parse(event.data) && JSON.parse(event.data).result === 0) {
            console.log(that.formData)
            that.formData = JSON.parse(event.data)
          } else {
            that.$message('发生错误，请重试')
          }
        }
            // Listen for socket closes
        socket.onclose = function (event) {
          console.log('Client notified socket has closed', event)
          that.$message('发生错误，请重试')
        }
      }
    }
//    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  rel="stylesheet/scss">
body{
  background: #ffffff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  &:first-child {
    margin-top: 10px;
  }
}
.el-form {
  width: 600px;
}
</style>
